<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>01_HelloWorld</title>
  </head>
  <body>
    <!--
      1. 引入Vue.js
      2. 创建Vue对象
        el : 指定根element(选择器)
        data : 初始化数据(页面可以访问)
      3. 双向数据绑定 : v-model
      4. 显示数据 : {{xxx}}
      5. 理解vue的mvvm实现
    -->
    <div id="app">
      <!-- 插值语法、双大括号表达式 -->
      <input type="text" v-model="msg" />
      <input type="text" value="hello" />
      <h1>{{ msg }}</h1>
      <!-- <h1>{{ b }}</h1> -->
    </div>

    <!-- 引入vue.js, 全局就有一个构造函数Vue -->
    <script src="../js/vue.js"></script>
    <script>
      /*
        Vue 模板语法
          1. 插值语法
            - 语法：{{ JS表达式 }}
            - 作用：用来动态展示js数据(数据的是vue中的数据)

          表达式和语句区别：
            表达式
              1. 没有分号
              2. 有返回值，可以undefined
            语句： 
              1. 有分号结尾，可以省略分号（运行时自动补全）
              2. 没有返回值

            function fn() {} // 语句
            const fn = () => {} // 函数表达式语句
            fn // 表达式
            fn() // 表达式
            fn(); // 语句
            if (a > 0) {} // 语句
            a > 0 // 表达式

          2. 指令语法
            - v-model="JS表达式"
            - 作用：双向数据绑定
              - 数据能由Model层流向View层，进行展示
              - 数据能由View层流向Model层，修改Model层的数据
            - 应用：常用于收集表单数据
            

            MVVM Vue设计模式
              - M Model 数据层（data）
              - V View  视图层（DOM）
              - VM ViewModel 视图模型层（Vue会做的事情）
                - Data Bindings 数据绑定：将数据由数据层流向视图层（vm做的）
                  - 操作DOM元素的value或textContent属性
                - DOM Listeners 事件监听：将数据由视图层流向数据层
                  - 给元素绑定事件input事件，来收集输入的数据，更新数据层数据
                - 双向数据流 

          
      */
      const msg = "Hello Vue";

      const a = 123;

      new Vue({
        // 配置对象（属性名固定的对象）
        // element 元素，获取到选择器对应的DOM元素，解析其子元素
        // document.querySelector
        el: "#app",
        data: {
          // 数据: 定义Vue中使用的数据
          msg,
          b: a,
        },
      });
    </script>
  </body>
</html>
